<template>
  <!-- 新房   二手房-->
  <div class="box" @click="ycdb()">
    <heads></heads>
    <tools></tools>
    <div class="tit1">
      <div class="list">
        <div class="li" style="cursor: pointer" @click="() => {
          $router.push('/');
        }
          ">
          <img src="../../assets/logo.png" />
        </div>
        <div :style="olds == 0 ? 'color:#64B6A8;' : ''" @click="cutHome(2, 2)">
          二手车
        </div>
        <div :style="olds == 1 ? 'color:#64B6A8;' : ''" @click="cutHome(2, 1)">
          到店新车
        </div>
        <div :style="olds == 2 ? 'color:#64B6A8;' : ''" @click="cutHome(2, 3)">
          在售车系
        </div>
        <div class="sousuo">
          <input type="text" @keyup.enter="search" v-model="HousesPage.searchKeyword" placeholder="请输入关键字开始找车" />
          <p class="el-icon-search" @click="search"></p>
        </div>
        <!-- <div class="download">下载帮帮同城app</div> -->
        <downloadAppBtn></downloadAppBtn>
      </div>
    </div>
    <div class="saixuan">
      <div class="li">
        <p class="p1">车辆类型</p>
        <p class="p2" @click="czType4Click(-1)" :class="czTypeIndex4 == -1 ? 'xuan' : ''">
          不限
        </p>
        <div class="list">
          <div v-for="(item, index) in czType4" :key="index" @click="czType4Click(item)"
            :class="czTypeIndex4 == item.valueNum ? 'xuan' : ''">
            {{ item.valueName }}
          </div>
        </div>
      </div>
      <div class="li">
        <p class="p1" style="line-height: 25px">品牌</p>
        <p class="p2" style="line-height: 25px" @click="ppaiClick(-1)" :class="ppaiIndex == -1 ? 'xuan' : ''">
          不限
        </p>
        <!-- @mouseenter="ppaiClick(item,'brandChar'+index)"
            @mouseleave="ppaiyichu()" -->
        <div class="list" style="line-height: 25px">
          <div v-for="(item, index) in clppsy" :key="index" @click="ppaiClick(item, 'brandChar' + index)"
            :ref="'brandChar' + index" :class="ppaiIndex == item ? 'yiru ppdiv' : 'ppdiv'">
            {{ item }}
            <!-- <div
              class="brandPop"
              v-if="'xz' + item == clppChage"
              @mouseenter="ppaixze = true"
              @mouseleave="ppaixze = false"
            >
              <div
                class="brandPop_item"
                v-for="i in clppArry"
                :key="i.id"
                @click="xzppaiClick(i)"
              >
                <img class="brandPop_item_img" :src="i.brandImage" alt="" />
                <span class="brandPop_item_span">{{ i.brandName }}</span>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="brandPop2" v-if="brandloading">
        <div class="brandPop_item2" :class="brandIdToVehicleSeriesId[i.id] ? 'xuan' : ''" v-for="i in clppArry"
          :key="i.id" @click="xzppaiClick(i, i.id == ppaiData.id)">
          <img class="brandPop_item_img2" :src="i.brandImage" alt="" />
          <span class="brandPop_item_span2">{{ i.brandName }}</span>
        </div>
        <div class="trangle" :style="'left:' + trangleLeft + 'px'"></div>
      </div>
      <div class="li" v-if="ppaiData">
        <p class="p1">车系</p>
        <!-- 单选 -->
        <!-- <p
          class="p2"
          @click="priceClick(-1)"
          :class="priceIndex == -1 ? 'xuan' : ''"
        >
          不限
        </p>
        <div class="list">
          <div
            v-for="(item, index) in clcxArry"
            :key="index"
            @click="priceClick(item)"
            :class="arr.includes(ppaiData.brandName+'|'+item.seriesName)  ? 'xuan' : ''"
          >

            {{ item.seriesName }}
          </div>
        </div> -->
        <!-- 多选 -->
        <p class="p2" @click="priceClick(-1)" :class="priceIndex == -1 ||
          (Array.isArray(priceIndex) &&
            priceIndex.includes(ppaiData.brandName))
          ? 'xuan'
          : ''
          ">
          <!-- brandIdToVehicleSeriesId[ppaiData.id]&&brandIdToVehicleSeriesId[ppaiData.id].filter(item=>item.id).length>0 -->

          不限
        </p>
        <div class="list">
          <div :title="item.seriesName" v-for="(item, index) in clcxArry" :key="index" @click="priceClick(item)" :class="priceIndex != -1 &&
            priceIndex.includes(ppaiData.brandName + '|' + item.seriesName)
            ? 'xuan div-v line1' +
            ' ' +
            ppaiData.brandName +
            '|' +
            item.seriesName
            : 'div-v line1' +
            ' ' +
            ppaiData.brandName +
            '|' +
            item.seriesName
            ">
            {{ item.seriesName }}
          </div>
        </div>
      </div>

      <div class="li">
        <p class="p1" style="height: 32px; line-height: 32px">价格</p>
        <p class="p2" style="height: 32px; line-height: 32px" @click="czType8Click(-1)"
          :class="czTypeIndex8 == -1 ? 'xuan' : ''">
          不限
        </p>
        <div class="list">
          <div style="height: 32px; line-height: 32px; margin-bottom: 0" v-for="(item, index) in czType8" :key="index"
            @click="czType8Click(item)" :class="czTypeIndex8 == item.valueNum ? 'xuan' : ''">
            {{ item.valueName }}
          </div>
          <div style="display: inline-block; color: #333333">
            <span style="margin-right: 6px">自定义</span>
            <input type="number" placeholder="最低价" style="
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #d0d0d0;
                height: 32px;
                line-height: 32px;
                width: 68px;
                padding-left: 10px;
                color: #333;
                font-size: 16px;
              " v-model="minPrice" />
            <span style="margin-right: 3px; margin-left: 3px">-</span>
            <input type="number" v-model="maxPrice" placeholder="最高价" style="
                background: #ffffff;
                border-radius: 4px;
                border: 1px solid #d0d0d0;
                height: 32px;
                line-height: 32px;
                width: 68px;
                padding-left: 10px;
                color: #333;
                font-size: 16px;
              " />
            <span style="margin-right: 6px; margin-left: 6px">万</span>
            <div @click.stop="comfirmPrice" style="
                text-align: center;
                display: inline-block;
                height: 32px;
                line-height: 32px;
                width: 78px;
                background: #64b6a8;
                border-radius: 4px;
                color: #ffffff;
                font-weight: 600;
              ">
              确定
            </div>
          </div>
        </div>
      </div>
      <div class="li">
        <p class="p1">变速箱</p>
        <p class="p2" @click="czType22Click(-1)" :class="czTypeIndex22 == -1 ? 'xuan' : ''">
          不限
        </p>
        <div class="list">
          <div v-for="(item, index) in czType22" :key="index" @click="czType22Click(item)"
            :class="czTypeIndex22 == item.valueNum ? 'xuan' : ''">
            {{ item.valueName }}
          </div>
        </div>
      </div>
      <div class="li" v-if="olds == 0">
        <p class="p1">车龄</p>
        <p class="p2" @click="czType9Click(-1)" :class="czTypeIndex9 == -1 ? 'xuan' : ''">
          不限
        </p>
        <div class="list">
          <div v-for="(item, index) in czType9" :key="index" @click="czType9Click(item)"
            :class="czTypeIndex9 == item.valueNum ? 'xuan' : ''">
            {{ item.valueName }}
          </div>
        </div>
      </div>
      <div v-if="!showMore">
        <div class="li" v-if="!newSource">
          <p class="p1">排量</p>
          <p class="p2" @click="typeClick10(-1)" :class="typeIndex10 == -1 ? 'xuan' : ''">
            不限
          </p>
          <div class="list divs">
            <div v-for="(item, index) in czType10" :key="index" @click="typeClick10(item)"
              :class="typeIndex10 == item.valueNum ? 'xuan' : ''">
              {{ item.valueName }}
            </div>
          </div>
        </div>
        <div class="li" v-if="olds == 0">
          <p class="p1">里程</p>
          <p class="p2" @click="typeClick12(-1)" :class="typeIndex12 == -1 ? 'xuan' : ''">
            不限
          </p>
          <div class="list divs">
            <div v-for="(item, index) in czType12" :key="index" @click="typeClick12(item)"
              :class="typeIndex12 == item.valueNum ? 'xuan' : ''">
              {{ item.valueName }}
            </div>
          </div>
        </div>
        <!-- <div class="li">
          <p class="p1">车型</p>
          <p
            class="p2"
            @click="czType7Click(-1)"
            :class="czTypeIndex7 == -1 ? 'xuan' : ''"
          >
            不限
          </p>
          <div class="list">
            <div
              v-for="(item, index) in czType7"
              :key="index"
              @click="czType7Click(item)"
              :class="czTypeIndex7 == item.valueNum ? 'xuan' : ''"
            >
              {{ item.valueName }}
            </div>
          </div>
        </div> -->
        <div class="li">
          <p class="p1">燃油类型</p>
          <p class="p2" @click="czType5Click(-1)" :class="czTypeIndex5 == -1 ? 'xuan' : ''">
            不限
          </p>
          <div class="list">
            <div v-for="(item, index) in czType5" :key="index" @click="czType5Click(item)"
              :class="czTypeIndex5 == item.valueNum ? 'xuan' : ''">
              {{ item.valueName }}
            </div>
          </div>
        </div>
        <div class="li" v-if="!newSource">
          <p class="p1">排放标准</p>
          <p class="p2" @click="czType6Click(-1)" :class="czTypeIndex6 == -1 ? 'xuan' : ''">
            不限
          </p>
          <div class="list">
            <div v-for="(item, index) in czType6" :key="index" @click="czType6Click(item)"
              :class="czTypeIndex6 == item.valueNum ? 'xuan' : ''">
              {{ item.valueName }}
            </div>
          </div>
        </div>
      </div>

      <div class="yixuan">
        <div class="na">已选条件：</div>
        <div class="li" v-for="(item, index) in screenList" :key="item.type + item.id">
          {{ item.value }}
          <img src="../../assets/cha.png" @click="clear(item)" />
        </div>
        <div class="qinchu" v-if="screenList.length > 0" @click="clear(-1)">
          清除全部
        </div>
      </div>
      <div v-if="showMore">
        <div style="
            font-size: 16px;
            line-height: 16px;
            color: #64b6a8;
            margin-bottom: 18px;
            margin-top: 28px;
          ">
          <span @click.stop="goMore(false)" style="margin-left: 500px; cursor: pointer">更多筛选条件<span
              class="el-icon-arrow-down" style="color: #64b6a8"></span>
          </span>
        </div>
      </div>
      <div v-if="!showMore">
        <div style="
            font-size: 16px;
            line-height: 16px;
            color: #64b6a8;
            margin-bottom: 18px;
            margin-top: 28px;
          ">
          <span @click.stop="goMore(true)" style="margin-left: 500px; cursor: pointer">收起筛选条件<span
              class="el-icon-arrow-up" style="color: #64b6a8"></span>
          </span>
        </div>
      </div>

      <div class="seperate"></div>
    </div>
    <div class="bottom">
      <div class="titLiat" v-if="olds == 0">
        <div @click="titClick(item.num)" :class="xuanzhong == item.num ? 'li cur' : 'li'" v-for="(item, index) in list"
          :key="index">
          <p>{{ item.name }}</p>
          <img v-if="item.num == xuanzhong" src="../../assets/xuanzhong.png" />
        </div>
      </div>
      <div class="list">
        <div class="li" v-for="(item, index) in housesList" :key="index">
          <img class="biao" @click="details(item)" style="
              object-fit: contain;
              cursor: pointer;
              background-color: #00000033;
            " :src="item.vehicleCoverPicture
              ? item.vehicleCoverPicture
              : $img + item.houseImageDiv
              " />

          <div class="name" @mouseleave="chuqu(item)" @mouseenter="jiaruJin1(item)">
            <div class="t_1" style="cursor: pointer; color: #333" @click="details(item)">
              {{
                item.vehicleBrandModel
                ? (item.vehicleBrandModel.split("|")[0] || "") +
                " " +
                (item.vehicleBrandModel.split("|")[1] || "")
                : ""
              }}
              {{ item.model ? item.model + "/" : "" }}
              {{
                item.bodyStructureDoors +
                "门" +
                item.bodyStructureSeat +
                "座" +
                item.bodyStructureVehicle +
                "车"
              }}
            </div>
            <img class="t_1_1" v-if="jiaruXuan1 == item && !item.houseContrast" @click.stop="jiaruChu1(item.id)"
              src="../../assets/duibi1.png" />
            <img class="t_1_1" v-if="jiaruXuan1 == item && item.houseContrast" @click.stop="duibiqx(item.id)"
              src="../../assets/qxduibi.png" />
            <div class="t_2" style="cursor: pointer" @click="details(item)">
              <span style="margin-right: 5px">{{
                item.mileage
                ? +item.mileage >= 10000
                  ? +(item.mileage / 10000).toFixed(1) + "万公里/"
                  : item.mileage + "公里/"
                : ""
              }}{{
  item.licensingTimeYear ? item.licensingTimeYear + "年" : ""
}}</span>
            </div>
            <div class="t_4">
              <img style="cursor: pointer" @click="toAgent(item)" :src="item.userInformation
                  ? item.userInformation.image ||
                  'https://pic.bangbangtongcheng.com/static/my/header.png'
                  : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                " />
              <span @click="toAgent(item)" style="cursor: pointer">{{
                item.userInformation
                ? item.userInformation.nikeName || "未命名用户"
                : "未命名用户"
              }}</span>
              <div @click="shopdetails(item)" style="cursor: pointer">
                {{ item.distributor ? item.distributor.storeName : "个人车源" }}
              </div>
            </div>
          </div>
          <div class="qian">
            <p class="p1">
              {{
                item.intervalPrice && item.intervalPrice != ""
                ? item.intervalPrice.indexOf("-") > -1
                  ? item.intervalPrice.split("-")[0] +
                  "-" +
                  item.intervalPrice.split("-")[1] +
                  "万"
                  : ""
                : item.price + "万"
              }}
            </p>
          </div>
        </div>
      </div>
      <div v-if="housesTotal == 0" style="height: 450px; padding-top: 120px; box-sizing: border-box">
        <el-empty></el-empty>
      </div>
      <div class="fenye">
        <el-pagination background layout="prev, pager, next" :total="housesTotal" :current-page="HousesPage.pageNo"
          @current-change="HousesCurrentChange" :page-size="HousesPage.pageSize"></el-pagination>
      </div>
    </div>
    <floor></floor>
    <div class="gotop" @click="toTop" v-show="showToTop" style="left: calc(100vw / 2 + 600px);;">
      <img src="@/assets/top.png" />返回顶部
    </div>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import tools from "../../components/tools";
import BbczItem from "./comp/bbcz-item.vue";
var queryDataDictionaryList = [];
export default {
  components: {
    floor,
    heads,
    tools,
    BbczItem
  },
  watch: {
    olds: {
      handler(newV, oldV) {
        // if(newV==1){//新车
        //   this.list = this.tempList.slice(2,1)
        // }else{
        //   this.list = this.tempList
        // }
      },
      immediate: true
    },
    brandIdToVehicleSeriesId(newV) {
      // console.log("newVnewVnewVnewVnewVnewVnewVnewVnewVnewVnewVnewV", newV);
      if (newV) {
        // console.log(
        //   ">==brandIdToVehicleSeriesIdbrandIdToVehicleSeriesIdbrandIdToVehicleSeriesIdbrandIdToVehicleSeriesId",
        //   newV
        // );
        var newA = [];
        this.screenList.map(item => {
          if (item.type == "vehicleBrandModel") {
            item.flag = false;
          }
        });
        for (const key in this.brandIdToVehicleSeriesId) {
          var arr = this.brandIdToVehicleSeriesId[key];
          if (Array.isArray(arr)) {
            if (arr.length == 1) {
              newA.push({
                ...JSON.parse(JSON.stringify(arr[0])),
                id: arr[0].uuid,
                value: arr[0].brandName,
                type: "vehicleBrandModel"
              });
            } else if (arr.length > 1) {
              arr
                .filter(item => item.id)
                .map(item => {
                  newA.push({
                    ...JSON.parse(JSON.stringify(item)),

                    value: item.seriesName,
                    type: "vehicleBrandModel"
                  });
                });
            }
          }
        }
        // this.screenList=this.screenList.concat(newA)
        newA.map(item => {
          if (this.checkFilterData(this.screenList, item.id, item.type)) {
            this.filterData(this.screenList, item.id, item.type)[0].flag = true;
          } else {
            this.screenList.push({ ...item, flag: true });
          }
        });
        this.screenList = this.screenList.filter(item => item.flag);
        // this.screenList = newA;
        // console.log("newA", newA);
      }
    },
    HousesPage(newV) {
      console.log("newVnewVnewVnewV", newV);
      var obj = "";
      var labelKey;
      var checkArr;
      var screenList = [];
      this.screenList.map(item => {
        if (item.type != "vehicleBrandModel") {
          item.flag = false;
        }
      });
      for (const key in newV) {
        if (Object.hasOwnProperty.call(newV, key)) {
          const element = newV[key];

          // 没有就新增
          if (
            key == "vehicleClassification" ||
            key == "price" ||
            key == "transmissionCase" ||
            key == "vehicleAge" ||
            key == "displacement" ||
            key == "mileage" ||
            key == "fuelType" ||
            key == "emissionStandard" ||
            key == "minimumPrice"
          ) {
            labelKey = "";
            obj = "";
            if (key == "vehicleClassification") {
              checkArr = this.czType4;
            } else if (key == "price") {
              checkArr = this.czType8;
            } else if (key == "minimumPrice") {
              obj = [
                {
                  id: 100868,
                  value: `${element}-${newV["highestPrice"]}万内`
                }
              ];
            } else if (key == "transmissionCase") {
              checkArr = this.czType22;
              labelKey = "valueNum";
            } else if (key == "vehicleAge") {
              checkArr = this.czType9;
            } else if (key == "displacement") {
              checkArr = this.czType10;
            } else if (key == "mileage") {
              checkArr = this.czType12;
            } else if (key == "fuelType") {
              checkArr = this.czType5;
            } else if (key == "emissionStandard") {
              checkArr = this.czType6;
            }
            labelKey = labelKey || "valueName";
            obj =
              obj ||
              checkArr
                .filter(item => item[labelKey] == element)
                .map(item => {
                  return {
                    ...JSON.parse(JSON.stringify(item)),
                    value: item.valueName,
                    type: key
                  };
                });
            console.log(
              "this.checkFilterData(this.screenList, obj.id, key)",
              this.checkFilterData(this.screenList, obj.id, key)
            );
            if (!this.checkFilterData(this.screenList, obj.id, key)) {
              console.log("22222", obj);
              screenList.push(...obj);
            }
          }
        }
      }

      screenList.map(item => {
        if (this.checkFilterData(this.screenList, item.id, item.type)) {
          this.filterData(this.screenList, item.id, item.type)[0].flag = true;
        } else {
          this.screenList.push({ ...item, flag: true });
        }
      });
      // console.log("this.screenListthis.screenListthis.screenList", screenList);
      this.screenList = this.screenList.filter(item => item.flag);
      // console.log("this.screenListthis.screenListthis.screenList", screenList);
    }
  },
  data() {
    return {
      screenList: [],
      brandloading: false,
      olds: 0,
      isshow: false,
      xuanzhong: 0,
      tempList: [
        {
          num: 0,
          name: "全部"
        },
        {
          num: 1,
          name: "个人"
        },
        {
          num: 2,
          name: "车商"
        }
      ],
      list: [
        {
          num: 0,
          name: "全部"
        },
        {
          num: 1,
          name: "个人"
        },
        {
          num: 2,
          name: "车商"
        }
      ],
      leibieIndex: -1,
      ppaiIndex: -1,
      priceIndex: -1,
      loucIndex: -1,
      mianjiIndex: -1,

      jiaruXuan: "",
      jiaruXuan1: "",
      HousesPage: {
        pageNo: 1,
        pageSize: 10,
        searchKeyword: "",
        // isShare:1,//是否共享（0：默认不共享，1：共享）
        // resignationData:1,//是否为离职数据（0：在职数据，1：离职数据）
        // whetherRecommendedVehicle:1,//是否为推荐车源（0：否，1：是）
        // whetherTopHome:1,//是否置顶到大首页（0：置顶到大首页，1：不置顶到大首页）
        // homeDisplay:0,//首页是否显示（0：显示，1：不显示）
        // copyData:1,//是否复制数据（0：原始数据，1：复制数据）
        category: 0, //业务类型（0：全部，1：个人，2：车商）
        vehicleType: 1 //车辆新旧售卖类型（1：到店新车；2：二手车；3：在售车系）
      },
      housesList: [],
      housesTotal: 0,
      type7: [], //区域
      type8: [], //价格
      type9: [], //面积
      type10: [], //楼层
      type1: [], //类别
      recomHousesList: [], //推荐房源信息
      recomstate: false, //是否出现推荐房源
      searchtext: "",
      loginstate: false,
      // 车辆品牌索引
      clppsy: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ],
      // 车辆品牌数据
      clppArry: [],
      clppChage: "xz",
      // 判断是否移入品牌选择div中
      ppaixze: false,
      // 选中品牌的数据
      ppaiData: "",
      // 车系数据
      clcxArry: [],
      // 字典参数
      dictParam: {
        type: 0,
        pageNo: 1,
        pageSize: 99
      },
      pageType: "cz",
      czType4: [], //车辆类型
      czType5: [], //燃油类型
      czType6: [], //排放标准
      czType7: [], //车型
      czType8: [], // 价格
      czType9: [], // 车龄
      czType22: [], // 变速箱

      czTypeIndex4: -1,
      czTypeIndex5: -1,
      czTypeIndex6: -1,
      czTypeIndex7: -1,
      czTypeIndex8: -1,
      czTypeIndex9: -1,
      czTypeIndex22: -1,
      maxPrice: "",
      minPrice: "",
      showMore: true,
      typeIndex10: -1,
      typeIndex12: -1,
      czType10: [],
      czType12: [],
      newSource: false,

      arr: [], //车系相关数组
      trangleLeft: 10
    };
  },
  mounted() { },
  created() {
    this.loadDict();
    this.initOld();
    this.init();

    if (this.olds == 1) {
      //到店新车

      this.list = [
        {
          num: 0,
          name: "全部"
        }
      ];
    }
    if (this.$route.query.search) {
      this.HousesPage.searchKeyword = this.$route.query.search;
      this.search();
    } else {
      this.initgetHouseInfo();
    }
  },
  methods: {
    getArrLabel(arr, id) {
      arr = arr.filter(item => item.valueNum == id);
      return arr.length > 0 ? arr[0].valueName : "";
    },
    addListen(obj) {
      var tempObj = JSON.parse(JSON.stringify(obj));
      this.HousesPage = Object.assign({}, tempObj);
    },
    checkFilterData(arr = [], id, type) {
      var flag = false;
      return arr.filter(item => item.type == type && item.id == id).length > 0;
    },
    filterData(arr = [], id, type) {
      var flag = false;
      return arr.filter(item => item.type == type && item.id == id);
    },
    clear(item) {
      if (item != -1) {
        var type = item.type;
        if (type == "vehicleClassification") {
          //车辆类型
          this.czType4Click(-1);
        } else if (type == "vehicleBrandModel") {
          //车系
          if (item.uuid) {
            this.xzppaiClick(item, true, "from");
          } else {
            this.priceClick(item);
          }
        } else if (type == "price" || type == "minimumPrice") {
          this.czType8Click(-1);
        } else if (type == "transmissionCase") {
          this.czType22Click(-1);
          // 变速箱
        } else if (type == "vehicleAge") {
          this.czType9Click(-1);
          // 车龄
        } else if (type == "displacement") {
          this.typeClick10(-1);
          // 排量
        } else if (type == "mileage") {
          // 里程
          this.typeClick12(-1);
        } else if (type == "fuelType") {
          this.czType5Click(-1);
          // 燃油类型
        } else if (type == "emissionStandard") {
          this.czType6Click(-1);
          // 排放标准
        }
      } else {
        // 清除全部
        // this.dealObjFnc(1, 1, "delAll");
        // this.HousesPage.vehicleBrandModel = "";
        // this.priceIndex = [];
        // this.initgetHouseInfo();

        this.czTypeIndex6 = item;
        delete this.HousesPage.emissionStandard;
        this.czTypeIndex5 = item;
        delete this.HousesPage.fuelType;
        this.typeIndex12 = item;
        delete this.HousesPage.mileage;
        this.typeIndex10 = item;
        delete this.HousesPage.displacement;
        this.czTypeIndex9 = item;
        delete this.HousesPage.vehicleAge;
        this.czTypeIndex22 = item;
        delete this.HousesPage.transmissionCase;
        this.czTypeIndex8 = item;
        delete this.HousesPage.price;
        this.minPrice = "";
        this.maxPrice = "";
        delete this.HousesPage.minimumPrice;
        delete this.HousesPage.highestPrice;
        this.czTypeIndex4 = item;
        delete this.HousesPage.vehicleClassification;

        this.ppaiClick(-1);
        // this.initgetHouseInfo();
      }
    },
    initgetHouseInfo(pageNo) {
      this.HousesPage.pageNo = pageNo || 1;
      this.getHouseInfo();
    },
    typeClick10(item) {
      if (item != -1) {
        this.typeIndex10 = item.valueNum;
        this.HousesPage.displacement = item.valueName;
      } else {
        this.typeIndex10 = item;
        delete this.HousesPage.displacement;
      }
      this.initgetHouseInfo();
    },
    typeClick12(item) {
      if (item != -1) {
        this.typeIndex12 = item.valueNum;
        this.HousesPage.mileage = item.valueName;
      } else {
        this.typeIndex12 = item;
        delete this.HousesPage.mileage;
      }
      this.initgetHouseInfo();
    },
    goMore(flag) {
      this.showMore = flag;
    },
    async loadDict() {
      // id: 1
      // image: ""
      // remarks: ""
      // sort: 1
      // type: "4"
      // updateBy: ""
      // updateDate: "2022-09-17 16:01:37"
      // valueName: "轿车"
      // valueNum: 1

      var czType = await this.getType("2,11,4,8,9,10,6,5,12");
      queryDataDictionaryList = czType;
      czType.map(item => {
        if (item.type == "4") this.czType4.push(item);
        if (item.type == "5") this.czType5.push(item);
        if (item.type == "6") this.czType6.push(item);
        if (item.type == "7") this.czType7.push(item);
        if (item.type == "8") this.czType8.push(item);
        if (item.type == "9") this.czType9.push(item);
        // 排量
        if (item.type == 10) this.czType10.push(item);
        // 里程
        if (item.type == 12) this.czType12.push(item);
      });
      this.czType22 = [
        { id: 10001, valueName: "自动", valueNum: 1 },
        { id: 10002, valueName: "手动", valueNum: 2 }
      ];
      console.log(this.czType4);
    },
    comfirmPrice() {
      if (this.minPrice != "") {
        this.HousesPage.minimumPrice = this.minPrice;
      } else {
        delete this.HousesPage.minimumPrice;
      }
      if (this.maxPrice != "") {
        this.HousesPage.highestPrice = this.maxPrice;
      } else {
        delete this.HousesPage.highestPrice;
      }
      if (!this.minPrice && !this.maxPrice) {
        this.$message({
          message: "请输入最低价或最高价",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return;
      }
      if (this.minPrice.trim() != "" && this.maxPrice.trim() != "") {
        if (+this.minPrice.trim() > +this.maxPrice.trim()) {
          this.$message({
            message: "最低价不能大于最高价",
            type: "error",
            offset: 120,
            duration: 2000
          });
          return;
        }
      }
      this.czTypeIndex8 = -1;
      delete this.HousesPage.price;
      this.czTypeIndex8 = -9;
      this.initgetHouseInfo();
    },
    async getType(type) {
      var obj = await this.$getHttp(
        "/api/mobile/vehicleOwner/queryDataDictionaryList",
        {
          ...this.dictParam,
          type: type
        }
      );
      return obj.dataDictionaryList;
    },
    ppaiClick(item, ref) {
      if (item != -1) {
        this.ppaiIndex = item;
        this.queryBrand(item);
        this.clppChage = "xz" + item;
        console.dir(this.$refs[ref]);
        // alert("123")dom.offsetLeft
        this.trangleLeft = this.$refs[ref][0].offsetLeft + 10;
        // console.log(this.$refs[ref][0].offsetLeft)
        return;
      }

      this.trangleLeft = 10;
      this.brandloading = false;

      this.arr = [];
      this.dealObjFnc(1, 1, "delAll");
      this.HousesPage.vehicleBrandModel = "";
      this.ppaiIndex = item;
      this.clppChage = "xz";
      this.clppArry = [];
      this.ppaiData = "";
      this.initgetHouseInfo();
    },
    ppaiyichu() {
      let stim = setTimeout(() => {
        if (this.ppaixze) {
          clearTimeout(stim);
          return;
        }
        this.clppChage = "xz";
      }, 100);
    },
    xzppaiClick(item, flag, from) {
      // console.log("fromfromfromfrom", this.ppaiData);
      if (!from) {
        //下面筛选删除专用
        this.ppaiData = item;
      }

      var tempArr = [];

      if (this.brandIdToVehicleSeriesId[item.id] && flag) {
        console.log("tempArrtempArrtempArr", 1);
        tempArr = this.dealObjFnc(item.id, item, "del1");
        this.priceIndex = tempArr;
      } else {
        console.log("tempArrtempArrtempArr", 2);
        //未被选中的
        tempArr = this.dealObjFnc(item.id, item, "set");
        this.priceIndex = tempArr;
      }
      // 如果没有任何品牌,就关闭

      if (
        !tempArr.includes(this.ppaiData.brandName) &&
        item.brandName == this.ppaiData.brandName
      ) {
        // console.log("tempArrtempArrtempArr", this.ppaiData);
        this.ppaiData = "";
        this.clcxArry = [];
      }
      if (!from) {
        //下面筛选删除专用
        this.queryRange(item.id);
      }
      this.HousesPage.vehicleBrandModel = tempArr.join(",");
      this.initgetHouseInfo();
      // this.priceClick(-1)
    },
    // 查询车辆品牌
    queryBrand(index) {
      this.$getHttp("/api/mobile/vehicleOwner/queryVehicleBrandList", {
        initial: index
      }).then(res => {
        this.clppArry = res.vehicleBrandMapList[index];
        this.brandloading = true;
      });
    },
    // 查询车系
    queryRange(id) {
      this.$getHttp(
        "/api/mobile/vehicleOwner/queryVehicleSeriesListByBrandId",
        {
          brandId: id
        }
      ).then(res => {
        this.clcxArry = res.vehicleSeriesList;
      });
    },
    ycdb() {
      this.isshow = false;
    },
    init() {
      // this.getDictionaries()
      this.getUser();
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
      } else {
        this.loginstate = false;
      }
    },
    getArrLabel(arr, id) {
      arr = arr.filter(item => item.valueNum == id);
      return arr.length > 0 ? arr[0].valueName : "";
    },
    //查询房源信息
    getHouseInfo() {
      if (this.olds == 0) {
        // 二手車
        var url = "api/mobile/vehicleOwner/getUsedVehicle";
        var param = this.HousesPage;
        console.log("-->", this.czType9, this.typeIndex9);
        this.HousesPage.vehicleAge = this.getArrLabel(
          this.czType9,
          this.czTypeIndex9
        );

        this.HousesPage.mileage = this.getArrLabel(
          this.czType12,
          this.typeIndex12
        );
      } else if (this.olds == 1) {
        // 新车
        var url = "/api/mobile/vehicleOwner/getNewVehicle";
        // 新旧车
        delete this.HousesPage.vehicleAge;
        delete this.HousesPage.mileage;

        var param = { ...this.HousesPage, category: 0 };
      } else if(this.olds = 2){
        // 在售车系
        var url = 'api/mobile/vehicleOwner/getSeriesVehicle';
        var param = { ...this.HousesPage, category: 0 };
      }
      // 新能源
      if (this.czTypeIndex5 > 0) {
        var i = this.czType5.findIndex(
          item => item.valueNum == this.czTypeIndex5
        );
        if (i > -1 && this.czType5[i].valueName == "新能源") {
          delete this.HousesPage.emissionStandard;
          delete this.HousesPage.displacement;
        }
      }
      console.log(
        "this.HousesPagethis.HousesPagethis.HousesPage",
        this.HousesPage
      );

      this.addListen(this.HousesPage);
      this.$getHttp(url, param).then(data => {
        if (data.code == 200) {
          const contrastIdList = JSON.parse(
            localStorage.getItem("contrastIdList-cz")
          );
          //处理楼层信息
          data.vehicleInformationList.pageList.forEach(e => {
            if (contrastIdList != null) {
              e.houseContrast = false;
              contrastIdList.forEach(el => {
                if (el == e.id) {
                  e.houseContrast = true;
                }
              });
            }
            if (!e.hasOwnProperty("shop_name")) {
              e.shop_name = "个人房源";
            }
          });
          //查询是否加入对比
          this.housesList = data.vehicleInformationList.pageList;
          this.housesTotal = data.vehicleInformationList.pageCount;

          console.log(this.housesList, "222");
        }
      });
    },
    //查询字典(筛选条件)
    // getDictionaries(){
    // 	this.$getHttp("/mob/home/getDictionaries",{type:'7,8,9,10,1'}).then((data) => {
    // 		if(data.code == 200){
    // 			data.list.forEach(e => {
    // 				if(e.type == 7) this.type7.push(e)
    // 				if(e.type == 8) this.type8.push(e)
    // 				if(e.type == 9) this.type9.push(e)
    // 				if(e.type == 10) this.type10.push(e)
    // 				if(e.type == 1) this.type1.push(e)
    // 			});
    // 			console.log(data)
    // 		}
    // 	})
    // },
    dealObjFnc(key, value, type) {
      if (type == "set") {
        // var brandIdToVehicleSeriesId = JSON.parse(
        //   JSON.stringify(this.brandIdToVehicleSeriesId)
        // );
        // console.log(JSON.stringify(this.brandIdToVehicleSeriesId, null, 2));
        if (typeof value != "string") {
          value = JSON.parse(JSON.stringify(value));
          console.log("value.brandName", value);
          if (value.brandName) {
            //如果是品牌
            if (this.brandIdToVehicleSeriesId[key]) {
              //如果当前品牌存在
              if (
                this.brandIdToVehicleSeriesId[key].findIndex(
                  item => item.uuid && item.uuid == value.id
                ) > -1
              ) {
                //如果当前品牌id存在
                return this.dealObjFnc(key, value, "get");
              }
              // 上面判断可无
              return this.dealObjFnc(key, value, "get");
            }

            value.uuid = value.id;
            value.id = "";
            console.log("value.brandName", value);
          } else {
            //不然就是车系
          }
        }
        console.log(
          "22222222222222222",
          this.brandIdToVehicleSeriesId[value.id]
        );
        if (!this.brandIdToVehicleSeriesId[key]) {
          // this.brandIdToVehicleSeriesId = Object.assign(
          //   brandIdToVehicleSeriesId,
          //   {
          //     [key]: [value]
          //   }
          // );
          this.brandIdToVehicleSeriesId[key] = [value];
        } else if (this.brandIdToVehicleSeriesId[key]) {
          console.log("123");
          if (
            this.brandIdToVehicleSeriesId[key].findIndex(
              item => item.id == value.id
            ) == -1
          ) {
            this.brandIdToVehicleSeriesId[key].push({ ...value });
          } else {
            var i = this.brandIdToVehicleSeriesId[key].findIndex(
              item => item.id == value.id
            );
            this.brandIdToVehicleSeriesId[key].splice(i, 1);
          }
        }
        return this.dealObjFnc(key, value, "get");
      }
      if (type == "get") {
        var brandIdToVehicleSeriesId = JSON.parse(
          JSON.stringify(this.brandIdToVehicleSeriesId)
        );
        this.brandIdToVehicleSeriesId = Object.assign(
          {},
          brandIdToVehicleSeriesId
        );
        var arr = [];
        var tempArr;
        var tempStr;
        var flag = false;
        console.log(
          "this.brandIdToVehicleSeriesIdthis.brandIdToVehicleSeriesId",
          this.brandIdToVehicleSeriesId,
          value
        );
        for (const key in this.brandIdToVehicleSeriesId) {
          tempArr = this.brandIdToVehicleSeriesId[key];
          console.log("tempArr", tempArr);
          tempStr = tempArr.filter(item => item.uuid)[0].brandName;
          flag = tempArr.filter(item => !item.uuid).length > 0;

          arr = arr.concat(
            tempArr
              .map(item => {
                if (item.uuid) {
                  return !flag ? item.brandName : "";
                } else {
                  return tempStr + "|" + item.seriesName;
                }
              })
              .filter(item => item)
          );
        }
        console.log("arr", arr);

        // brandIdToVehicleSeriesId[value.id]&&brandIdToVehicleSeriesId[value.id].filter(item=>item.id).length>0
        return arr;
      }
      if (type == "del") {
        //( this.ppaiData.id, -1, "del")
        if (value == -1) {
          //清除这品牌所有车系时
          let brandArr = [];
          let brandArrLen = 0;
          if (Array.isArray(this.brandIdToVehicleSeriesId[key])) {
            brandArr = this.brandIdToVehicleSeriesId[key].filter(
              item => item.uuid
            );
            brandArrLen = brandArr.length;
          }

          this.brandIdToVehicleSeriesId[key] = brandArr;
        } else {
          var index = Array.isArray(this.brandIdToVehicleSeriesId[key])
            ? this.brandIdToVehicleSeriesId[key].findIndex(
              item => item.id == value.id
            )
            : -1;
          if (index > -1) {
            //清除这品牌单个车系时
            this.brandIdToVehicleSeriesId[key].splice(index, 1);
          } else {
            //这品牌增加单个车系时
            this.dealObjFnc(key, value, "set");
          }
        }
        return this.dealObjFnc(key, value, "get");
      }
      if (type == "del1") {
        delete this.brandIdToVehicleSeriesId[key];
        return this.dealObjFnc(key, value, "get");
      }
      if (type == "delAll") {
        //所有
        this.brandIdToVehicleSeriesId = {};
        return [];
      }
    },
    initOld() {
      var type = this.$route.query.transactionType;
      var old = this.$route.query.newOld;
      console.log(type + ";" + old);
      if (type == 2 && old == 2) {
        this.olds = 0;
        // this.HousesPage.transactionType = 2
        // this.HousesPage.newOld = 2
      }
      if (type == 2 && old == 1) {
        this.olds = 1;
        // this.HousesPage.transactionType = 2
        // this.HousesPage.newOld = 1
      }
      if (type == 2 && old == 3) {
        this.olds = 2;
        // this.HousesPage.transactionType = 2
        // this.HousesPage.newOld = 1
      }
    },
    search() {
      this.initgetHouseInfo();
      // if (this.HousesPage.keyword.trim() != "") {
      //   this.getHouseInfo()
      // }
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层/共" + fool[3] + "层";
      if (fool[0] == 3) return "独栋/共" + fool[1] + "层";
    },
    titClick(index) {
      this.xuanzhong = index;
      this.HousesPage.pageNo = 1;
      this.HousesPage.category = index;
      this.getHouseInfo();
    },
    czType4Click(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.czTypeIndex4 = item.valueNum;
        this.HousesPage.vehicleClassification = item.valueName;
      } else {
        this.czTypeIndex4 = item;
        delete this.HousesPage.vehicleClassification;
      }

      this.getHouseInfo();
    },

    priceClick(item) {
      console.log(this.ppaiData.brandName);
      //  this.HousesPage.vehicleBrandModel
      // 单选
      // if (item != -1) {
      //   this.priceIndex = item.seriesName;
      //   if(!this.arr.includes(this.ppaiData.brandName+"|"+item.seriesName)){
      //     this.arr.push(this.ppaiData.brandName+"|"+item.seriesName)
      //   }else if(this.arr.includes(this.ppaiData.brandName+"|"+item.seriesName)){
      //     var i = this.arr.findIndex((item)=>item==this.ppaiData.brandName+"|"+item.seriesName)
      //     this.arr.splice(i,1)
      //   }

      // } else {
      //   this.priceIndex = item;
      //   if(this.ppaiData&&this.ppaiData.brandName&&!this.arr.includes(this.ppaiData.brandName)){
      //     this.arr.push(this.ppaiData.brandName)
      //   }

      // }
      // this.HousesPage.vehicleBrandModel = this.arr.join(',')
      // console.log('arrarrarrarrarrarr',this.HousesPage.vehicleBrandModel);
      // 多选
      if (item != -1) {
        if (this.priceIndex != -1) {
          // if(this.priceIndex.includes(item.seriesName)){
          // 	// console.log("1=>>",this.priceIndex)
          // 	// console.log("1=>>",item.seriesName)

          // 	// console.log("1=>>",this.priceIndex.findIndex(item1=>item==item.seriesName))
          // 	this.priceIndex.splice(this.priceIndex.findIndex(item1=>item1==item.seriesName),1)
          // }else{
          // 	this.priceIndex.push(item.seriesName)
          // }
          this.priceIndex = this.dealObjFnc(item.brandId, item, "set");
        } else {
          console.log("set", this.brandIdToVehicleSeriesId);
          this.priceIndex = this.dealObjFnc(item.brandId, item, "set");
          console.log("set", this.brandIdToVehicleSeriesId);
        }
        this.priceIndex.length > 0
          ? (this.HousesPage.vehicleBrandModel = this.priceIndex.join(","))
          : delete this.HousesPage.vehicleBrandModel;
      } else {
        this.priceIndex = -1;
        if (this.brandIdToVehicleSeriesId[this.ppaiData.id]) {
          //

          this.HousesPage.vehicleBrandModel = this.dealObjFnc(
            this.ppaiData.id,
            -1,
            "del"
          ).join(",");
        } else {
          this.HousesPage.vehicleBrandModel = this.dealObjFnc(
            this.ppaiData.id,
            this.ppaiData,
            "set"
          ).join(",");
        }
      }
      console.log("priceIndexpriceIndex", this.priceIndex);
      this.initgetHouseInfo();
    },
    czType5Click(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.czTypeIndex5 = item.valueNum;
        this.HousesPage.fuelType = item.valueName;
      } else {
        this.czTypeIndex5 = item;
        delete this.HousesPage.fuelType;
      }
      if (item.valueName == "新能源") {
        this.czTypeIndex6 = -1;
        this.typeIndex10 = -1;
        this.newSource = true;
      } else {
        this.newSource = false;
      }

      this.getHouseInfo();
    },
    czType6Click(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.czTypeIndex6 = item.valueNum;
        this.HousesPage.emissionStandard = item.valueName;
      } else {
        this.czTypeIndex6 = item;
        delete this.HousesPage.emissionStandard;
      }

      this.initgetHouseInfo();
    },
    czType7Click(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.czTypeIndex7 = item.valueNum;
        this.HousesPage.model = item.valueNum;
      } else {
        this.czTypeIndex7 = item;
        delete this.HousesPage.model;
      }
      this.getHouseInfo();
    },
    czType8Click(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.czTypeIndex8 = item.valueNum;
        this.HousesPage.price = item.valueName;
      } else {
        this.czTypeIndex8 = item;
        delete this.HousesPage.price;
      }
      this.minPrice = "";
      this.maxPrice = "";
      delete this.HousesPage.minimumPrice;
      delete this.HousesPage.highestPrice;
      this.initgetHouseInfo();
    },
    czType9Click(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.czTypeIndex9 = item.valueNum;
        this.HousesPage.vehicleAge = item.valueName;
      } else {
        this.czTypeIndex9 = item;
        delete this.HousesPage.vehicleAge;
      }
      this.initgetHouseInfo();
    },

    czType22Click(item) {
      this.HousesPage.pageNo = 1;
      if (item != -1) {
        this.czTypeIndex22 = item.valueNum;
        this.HousesPage.transmissionCase = item.valueNum;
      } else {
        this.czTypeIndex22 = item;
        delete this.HousesPage.transmissionCase;
      }

      this.initgetHouseInfo();
    },
    HousesCurrentChange(e) {
      setTimeout(() => {
        this.scrollToElement(document.querySelector(".titLiat"));
      }, 200);

      this.HousesPage.pageNo = e;
      this.housesList = [];
      this.getHouseInfo();
    },
    jiaru(id) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.jiaruduibi(id);
    },
    jiaruJin(num) {
      this.jiaruXuan = num;
    },
    chuqu() {
      this.jiaruXuan = "";
    },
    jiaruChu() {
      this.jiaruXuan = "";
    },
    jiaruJin1(num) {
      this.jiaruXuan1 = num;
      this.isshow = true;
    },
    jiaruChu1(id) {
      if (!this.loginstate) {
        this.myErrorMessage("请登录!");
        return false;
      }
      this.jiaruXuan1 = "";
      this.jiaruduibi(id);
      window.event ? (window.event.cancelBubble = true) : e.stopPropagation(); //阻止冒泡
    },
    jiaruduibi(id) {
      let contrastIdList = JSON.parse(
        localStorage.getItem("contrastIdList-cz")
      );
      if (contrastIdList && contrastIdList.length >= 4) {
        this.$message({
          message: "最多4辆进行对比",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return;
      }
      if (contrastIdList == null) {
        let list = [id];
        localStorage.setItem("contrastIdList-cz", JSON.stringify(list));
      } else {
        contrastIdList.push(id);
        localStorage.setItem(
          "contrastIdList-cz",
          JSON.stringify(contrastIdList)
        );
      }
      this.housesList.forEach(e => {
        if (e.id == id) {
          e.houseContrast = true;
        }
      });
      this.$message({
        message: "已加入对比！",
        type: "success",
        offset: 120,
        duration: 2000
      });
    },
    quxiaoduibi(id) {
      let contrastIdList = JSON.parse(
        localStorage.getItem("contrastIdList-cz")
      );
      for (var i = 0; i < contrastIdList.length; i++) {
        if (contrastIdList[i] == id) {
          contrastIdList.splice(i, 1);
        }
      }
      localStorage.setItem("contrastIdList-cz", JSON.stringify(contrastIdList));
      this.housesList.forEach(e => {
        if (e.id == id) {
          e.houseContrast = false;
        }
      });
      this.$message({
        message: "已取消对比！",
        type: "error",
        offset: 120,
        duration: 2000
      });
    },
    duibiqx(id) {
      if (!this.loginstate) {
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        return false;
      }
      this.quxiaoduibi(id);
    },
    details(item, event) {
      this.openUrl({
        path: "/index/newSourceDetails",
        query: {
          id: item.id,
          type: this.olds
        }
      });
    },
    cutHome(type, old) {
      this.HousesPage.pageNo = 1;
      if (old == 2) {
        this.olds = 0;
        this.HousesPage.vehicleType = 2;
        this.list = this.tempList;
      } else if (old == 1){
        this.olds = 1;
        this.HousesPage.vehicleType = 1;
        this.list = [
          {
            num: 0,
            name: "全部"
          }
        ];
      } else if (old == 3) {
        this.olds = 2;
        this.HousesPage.vehicleType = '';
      }
      this.HousesPage.searchKeyword = '';
      this.initgetHouseInfo();
    }
  }
};
</script>
<style lang="less" scoped>
.brandPop2 {
  box-sizing: border-box;
  width: 1016px;
  // height: 200px;
  border: 1px solid #64b6a8;
  position: relative;
  left: 164px;
  background-color: #fff;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  // overflow: auto;
  // padding-left: 20px;
  padding: 6px 0 6px 12px;
  margin-bottom: 12px;

  .brandPop_item2 {
    display: flex;
    align-items: center;
    color: #000;
    min-height: 32px;
    margin-right: 24px;
    margin-bottom: 6px;
    color: #333333;

    &.xuan {
      color: #64b6a8;
    }

    cursor: pointer;

    .brandPop_item_img2 {
      width: 32px;
      height: auto;
    }

    .brandPop_item_span2 {
      margin-left: 6px;
      font-size: 14px;
      font-weight: 400;
    }
  }
}

.seperate {
  width: 1200px;
  height: 0px;
  opacity: 1;
  border: 1px solid #e0e0e0;
}

.box {
  position: relative;
  padding-bottom: 200px;
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
					height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;

      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .download {
      width: 200px;
      height: 50px;
      background-color: #64b6a8;
      border-radius: 6px;
      color: #fff;
      text-align: center;
      line-height: 50px;
    }

    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.saixuan {
  color: #333;
  width: 1200px;
  margin-left: 50%;
  margin: 0 auto;
  font-size: 0;
  margin-top: 40px;
  padding-bottom: 20px;

  .li {
    .p1 {
      display: inline-block;
      width: 70px;
      font-size: 16px;
      font-weight: 600;
      margin-right: 32px;
      vertical-align: top;
    }

    .p2 {
      display: inline-block;
      font-size: 16px;
      margin-right: 32px;
      vertical-align: top;
      cursor: pointer;
    }

    div {
      display: inline-block;
      font-size: 16px;
      margin-right: 14px;
      vertical-align: top;
      margin-bottom: 10px;
    }

    .div-v {
      display: inline-block;
      font-size: 16px;
      padding-right: 14px;
      vertical-align: top;
      margin-right: 0;
      margin-bottom: 10px;
      width: calc(100% / 6);
      overflow: hidden;
      box-sizing: border-box;
      height: 22px;
      line-height: 22px;
    }

    .list {
      width: 1016px;
      position: relative;

      div {
        cursor: pointer;
      }
    }

    .xuan {
      color: #64b6a8;
    }

    .yiru {
      width: 25px;
      height: 25px;
      border-radius: 25px;
      background-color: #64b6a8;
      text-align: center;
      line-height: 25px;
      color: #fff;
    }

    .ppdiv {
      position: relative;
      width: 25px;
      height: 25px;
      text-align: center;

      .brandPop {
        width: 160px;
        height: 200px;
        border: 1px solid red;
        position: absolute;
        right: -180px;
        bottom: -225px;
        background-color: #fff;
        z-index: 10000;
        display: flex;
        flex-direction: column;
        overflow: auto;
        padding-left: 20px;
        padding-top: 10px;

        .brandPop_item {
          display: flex;
          align-items: center;
          color: #000;
          min-height: 32px;

          .brandPop_item_img {
            width: 32px;
            height: 32px;
          }

          .brandPop_item_span {
            margin-left: 10px;
            font-size: 12px;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }
}

.bottom {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #333333;
  // margin-top: 0px;
  position: relative;

  .tit {
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 24px;
  }

  .list {
    width: 100%;

    .li {
      position: relative;
      padding-bottom: 24px;
      margin-bottom: 24px;
      border-bottom: 1px solid #e0e0e0;

      .biao {
        width: 300px;
        height: 200px;
        border-radius: 10px;
      }

      .duibi {
        position: absolute;
        width: 300px;
        height: 200px;
        top: 0;
        left: 0;
        background-color: rgba(51, 51, 51, 0.64);
        cursor: pointer;

        p {
          position: absolute;
          width: 130px;
          height: 48px;
          line-height: 48px;
          text-align: center;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 24px;
          color: #fff;
          border: 2px solid #ffffff;
          font-size: 21px;
        }
      }

      .name {
        display: inline-block;
        vertical-align: top;
        margin-left: 24px;
        position: relative;
        height: 200px;
        width: 700px;
        cursor: pointer;

        .t_1 {
          position: relative;
          font-size: 26px;

          padding-bottom: 12px;

          .t_1_1 {
            position: absolute;
            width: 130px;
            height: 58px;
            top: 30px;
            z-index: 999999;
            //top: 30px;
            //right: 20px;
          }
        }

        .t_1_1 {
          position: absolute;
          width: 130px;
          left: 120px;
          height: 58px;
          top: 30px;
          z-index: 999999;
          //top: 30px;
          //right: 20px;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_3 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_4 {
          position: absolute;
          font-size: 18px;
          color: #666666;
          bottom: 0;
          left: 0;

          img {
            width: 31px;
            height: 31px;
          }

          div {
            display: inline-block;
            //width: 90px;
            padding: 0px 5px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-left: 24px;
            color: #64b6a8;
          }
        }
      }

      .qian {
        position: absolute;
        top: 62px;
        right: 0;
        width: 190px;

        .p1 {
          width: 100%;
          font-size: 32px;
          color: #e00000;
          text-align: center;
          margin-bottom: 10px;
        }

        .p2 {
          width: 100%;
          font-size: 18px;
          color: #333333;
          text-align: center;
        }
      }
    }
  }

  .titLiat {
    width: 1200px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom: 16px;

    .li {
      display: inline-block;
      vertical-align: top;
      margin-right: 40px;
      color: #333;
      cursor: pointer;

      p {
        font-size: 24px;
      }

      img {
        width: 40px;
        height: 20px;
        margin-left: 50%;
        transform: translateX(-50%);
      }
    }

    .cur {
      color: #64b6a8;
      border: 0;
      transform: scale(1.1);
    }
  }
}

.fenye {
  width: 100%;
  height: 50px;
  text-align: center;
  margin: 60px 0px;

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}

.yixuan {
  box-sizing: border-box;
  padding-top: 15px;
  padding-left: 16px;
  width: 1200px;
  min-height: 60px;
  background-color: #f7f7f7;
  margin-left: 50%;
  transform: translateX(-50%);
  font-size: 16px;

  .na {
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
  }

  .li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 4px 28px 4px 10px;
    color: #333333;
    color: #64b6a8;
    border: 1px solid #64b6a8;
    margin-right: 12px;

    img {
      position: absolute;
      width: 17px;
      height: 17px;
      top: 7px;
      right: 3px;
      cursor: pointer;
    }
  }

  .qinchu {
    display: inline-block;
    vertical-align: middle;
    width: 86px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #999999;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
  }

  .qinchu,
  .li,
  .na {
    margin-bottom: 12px;
  }
}
</style>
